<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <div class="profile-header">
        <h2>个人资料</h2>
        <el-button @click="router.push('/home')" type="text">返回首页</el-button>
      </div>

      <div class="user-info">
        <el-avatar v-if="userProfile?.avatar" :size="120" :src="userProfile?.avatar"></el-avatar>
        <svg v-else t="1748688582983" class="icon"
             viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="3654" width="64" height="64">
          <path d="M0 512c0 282.4 229.6 512 512 512s512-229.6 512-512S794.4 0 512 0 0 229.6 0 512z" fill="#C0E0FF" p-id="3655"></path><path d="M709.6 824H315.2c-36 0-65.6-29.6-65.6-65.6 0-117.6 95.2-213.6 213.6-213.6h98.4c117.6 0 213.6 95.2 213.6 213.6 0 36-28.8 65.6-65.6 65.6zM512 528c-90.4 0-164-73.6-164-164S421.6 200 512 200s164 73.6 164 164C676.8 455.2 602.4 528 512 528z" fill="#64B9FF" p-id="3656"></path><path d="M709.6 824H315.2c-36 0-65.6-29.6-65.6-65.6 0-117.6 95.2-213.6 213.6-213.6h98.4c117.6 0 213.6 95.2 213.6 213.6 0 36-28.8 65.6-65.6 65.6zM512.8 528c-90.4 0-164-73.6-164-164C348 273.6 421.6 200 512 200s164 73.6 164 164C676.8 455.2 602.4 528 512.8 528z" fill="#64B9FF" p-id="3657"></path></svg>
        <!-- 显示用户姓名或账户 -->
        <h3>{{ userProfile?.name || userProfile?.userAccount || '加载中...' }}</h3>
      </div>

      <el-divider></el-divider>

      <el-form label-position="top" v-if="userProfile">
        <el-row :gutter="20"> <!-- 使用 el-row 和 el-col 分为两列 -->
          <el-col :span="24" :md="12"> <!-- 大于等于md时占12列，小于时占24列 -->
            <el-form-item label="姓名">
              <el-input :value="userProfile.name || ''" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" :md="12">
            <el-form-item label="账户">
              <el-input :value="userProfile.userAccount || ''" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24" :md="12">
            <el-form-item label="年龄">
              <el-input :value="userProfile.age || ''" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" :md="12">
            <el-form-item label="性别">
              <el-input :value="userProfile.gender" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24" :md="12">
            <el-form-item label="职业">
              <el-input :value="userProfile.occupation || ''" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" :md="12">
            <el-form-item label="手机号">
              <el-input :value="userProfile.phone || ''" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24" :md="12">
            <el-form-item label="邮箱">
              <el-input :value="userProfile.email || ''" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" :md="12">
            <el-form-item label="爱好">
              <el-input :value="formatHobbies(userProfile.hobbies)" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24" :md="12">
            <el-form-item label="恋爱状态">
              <el-select v-model="userProfile.loveStatus" disabled style="width: 100%;">
                <el-option label="单身" value="单身"></el-option>
                <el-option label="恋爱" value="恋爱"></el-option>
                <el-option label="已婚" value="已婚"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24" :md="12">
            <el-form-item label="AI 服务 Token">
              <div class="token-info-item"> <!-- 使用一个 div 来包含输入框和按钮 -->
                <div class="token-value-display">{{ userProfile.token || 0 }} 个</div>
                <el-button type="primary" size="small" @click="handleRecharge">充值</el-button>
              </div>
            </el-form-item>
          </el-col>

           <el-col :span="24">
            <el-form-item label="个人简介"> <!-- 新增个人简介字段 -->
              <el-input :value="userProfile.profile || ''" type="textarea" :rows="3" disabled></el-input>
            </el-form-item>
          </el-col>

<!--           <el-col :span="24" :md="12">-->
<!--             <el-form-item label="创建时间">-->
<!--               <el-input :value="formatDateTime(userProfile.createTime)" disabled></el-input>-->
<!--             </el-form-item>-->
<!--           </el-col>-->

<!--           <el-col :span="24" :md="12">-->
<!--             <el-form-item label="更新时间">-->
<!--               <el-input :value="formatDateTime(userProfile.updateTime)" disabled></el-input>-->
<!--             </el-form-item>-->
<!--           </el-col>-->
        </el-row>


        <!-- 可编辑字段和保存按钮 -->
        <el-form-item>
          <el-button type="primary" @click="saveProfile">保存修改 (待实现)</el-button>
        </el-form-item>
      </el-form>
       <div v-else>加载用户资料中...</div>

    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import {getUserInfoAPI} from "../api/user/user.js";
import {getUserData, setUserData} from "../state/user.js";

const router = useRouter();

const userProfile = ref(null); // 存储用户资料

// 格式化爱好列表
const formatHobbies = (hobbies) => {
  if (!hobbies || !Array.isArray(hobbies)) return '';
  return hobbies.join(', ');
};

// // 格式化日期时间
// const formatDateTime = (dateTime) => {
//   if (!dateTime) return '';
//   // 将后端返回的日期时间字符串转换为本地格式
//   const date = new Date(dateTime);
//   return date.toLocaleString('zh-CN', {
//     year: 'numeric',
//     month: '2-digit',
//     day: '2-digit',
//     hour: '2-digit',
//     minute: '2-digit',
//     second: '2-digit'
//   });
// };

// 在组件加载时获取用户资料
onMounted(async () => {
  try {
    // console.log('获取用户资料中...',getUserData());
    // if (getUserData().name !== '' && getUserData().userAccount !== ''){
    //   userProfile.value = getUserData();
    //   return;
    // }
    // 调用后端接口获取用户资料
    const response = await getUserInfoAPI(); // 使用您提供的接口地址

    if (response.code === 200) {
      userProfile.value = response.data; // 将获取到的数据赋值给 userProfile
      setUserData(userProfile.value);//前端缓存用户信息
      console.log('用户资料获取成功！', userProfile.value);
    } else {
      ElMessage.error(response.data.message || '获取用户资料失败！');
      userProfile.value = {}; // 设置为空对象避免v-if判断问题
      setUserData(null); // 清除前端缓存
    }
  } catch (error) {
    console.error('Error fetching user profile:', error);
    ElMessage.error('获取用户资料失败，请稍后重试！');
    userProfile.value = {}; // 设置为空对象避免v-if判断问题
    setUserData(null); // 清除前端缓存
  }
});

const saveProfile = () => {
  // TODO: 实现保存用户资料的逻辑
  // 1. 收集用户在可编辑字段中做出的修改 (目前所有字段都设置为disabled)
  // 2. 调用后端 API 保存修改
  console.log('保存用户资料功能待实现');
  ElMessage.info('保存功能待实现');
};

const handleRecharge = () => {
  // TODO: 实现充值逻辑
  console.log('充值功能待实现');
  ElMessage.info('充值功能待实现');
};

</script>

<style scoped>
.profile-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #1a1a2e; /* 与 Home 页面一致的背景色 */
  padding: 20px;
}

.profile-card {
  width: 600px; /* 调整卡片宽度 */
  padding: 30px;
  border-radius: 12px;
  background-color: #2a2a40; /* 与 Home 页面卡片一致的背景色 */
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid #404060;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.profile-header h2 {
    color: #66b1ff;
    font-size: 2em;
    text-shadow: 0 0 8px #66b1ff;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.avatar-placeholder {
    width: 60px; /* 头像占位符大小 */
    height: 60px;
    border-radius: 50%;
    background-color: #404060; /* 占位符背景色 */
}

.user-info h3 {
    color: #ffffff;
    font-size: 1.5em;
}

/* Adjustments for form item labels */
.profile-card :deep(.el-form-item__label) {
    color: #b3b3b3 !important;
    font-size: 1em !important;
    margin-bottom: 5px !important;
}

.profile-card :deep(.el-form-item) {
    margin-bottom: 20px;
}

/* Styles for input fields to make them white */
.profile-card :deep(.el-input__inner),
.profile-card :deep(.el-textarea__inner),
.profile-card :deep(.el-select__inner) {
    background-color: #ffffff !important; /* 强制白色背景 */
    border-color: #dcdfe6 !important; /* 浅色边框 */
    color: #606266 !important; /* 深色文字 */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* 浅色内阴影 */
}

/* Placeholder text color */
.profile-card :deep(.el-input__inner::placeholder),
.profile-card :deep(.el-textarea__inner::placeholder) {
    color: #a8aab2 !important; /* 强制 Placeholder 颜色 */
}

/* Icon color in input fields */
.profile-card :deep(.el-input__prefix-inner) {
    color: #606266 !important; /* 强制 Icon color */
}

/* Primary button styles (reusing from previous) */
.profile-card :deep(.el-button--primary) {
  background-color: #409EFF !important;
  border-color: #409EFF !important;
}

.profile-card :deep(.el-button--primary:hover) {
  background-color: #66b1ff !important;
  border-color: #66b1ff !important;
}

/* Styles for the Token info item */
.token-info-item {
  display: flex;
  align-items: center;
  gap: 10px; /* Space between elements */
  flex-wrap: wrap; /* 允许换行，以应对小屏幕 */
}

.token-info-item .token-value-display {
    color: #606266; /* Dark text color for white background */
    white-space: nowrap; /* Prevent wrapping */
    font-weight: bold; /* Make the token count stand out */
    /* margin-right: auto; 让Token数值尽量靠左，按钮靠右 */
}

/* Adjust button style within token info for alignment */
.token-info-item .el-button--small {
    /* margin-left: auto; 将按钮推到右边 */
}

@media (max-width: 768px) {
  .profile-card {
    width: 100%;
    padding: 20px;
  }

  .profile-header h2 {
      font-size: 1.8em;
  }

  .user-info {
      gap: 15px;
  }

  .avatar-placeholder {
      width: 50px;
      height: 50px;
  }

  .user-info h3 {
      font-size: 1.3em;
  }

  .el-form-item {
      margin-bottom: 15px;
  }

  .token-info-item {
      flex-direction: column; /* Stack elements vertically on small screens */
      align-items: flex-start;
      display: flex;
      gap: 20px; /* Adjust gap for vertical layout */
  }

  .token-info-item .token-value-display {
      margin-bottom: 5px; /* Add space below token count */
      color: #ffffff; /* White text color for dark background on small screens */
  }

  .token-info-item .el-button--small {
      width: 100%; /* Button full width */
      margin-top: 5px; /* Add space above button */
  }

   /* Ensure two columns stack on small screens */
  .el-col[class*="el-col-"]:not(.el-col-24) {
      padding-right: 10px !important;
      padding-left: 10px !important;
  }

  .el-col[class*="el-col-"].el-col-24 {
      padding-right: 10px !important;
      padding-left: 10px !important;
  }
}

/* Ensure consistent padding for columns */
.el-row {
    margin-left: -10px !important;
    margin-right: -10px !important;
}

.el-col {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
</style> 